<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>menu</title>
    <base href=>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>

    <script src="../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../js/lay-module/http/http.js"></script>
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn" id="btn-expand">全部展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">全部折叠</button>
            </div>
            <table id="munu-table" class="layui-table" lay-filter="munu-table"></table>
        </div>
    </div>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn " lay-event="auth"> 确定 </button>
        </div>
    </script>
</div>


<script>
    layui.use(['table', 'treetable'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var treetable = layui.treetable;

        // 2.根据获取的数据渲染表格
        var renderTable = function (data) {
            layer.load(2);
            treetable.render({
                data: data,
                toolbar: '#toolbarDemo',
                treeColIndex: 1,
                treeSpid: -1,
                treeIdName: 'id',
                treePidName: 'pid',
                elem: '#munu-table',
                // url: $api + 'authorized/menu/list',
                page: false,
                cols: [[
                    {type: 'numbers'},
                    {field: 'title', minWidth: 200, title: '权限名称'},
                    // {field: 'authority', title: '权限标识'},
                    {field: 'href', title: '菜单url'},
                    // {field: 'orderNumber', width: 80, align: 'center', title: '排序号'},
                    // {templet: '#auth-state', width: 120, align: 'center', title: '操作'}
                    {type: "checkbox", width: 50},
                ]],
                done: function () {
                    layer.closeAll('loading');
                }
            });

        }
        // 1.获取渲染的数据
        $.ajax({
            type: 'GET',
            url: $api + 'authorized/menu/list',
            contentType: "application/json;charset=utf-8",
            async: false,
            headers: {
                'Authorization': layui.data('table')['Authorization']
            },
            success: function (res) {
                identifyCode(res);
                renderTable(res.data)
            }
        });



        $('#btn-expand').click(function () {
            treetable.expandAll('#munu-table');
        });

        $('#btn-fold').click(function () {
            treetable.foldAll('#munu-table');
        });

        //监听工具条
        table.on('toolbar(munu-table)', function (obj) {
            var layEvent = obj.event;
            // 选择对应的权限id，进行授权
            if (layEvent === 'auth') {
                // 1、获取要授权的角色id
                var roleId = unescape(getQueryString("role"))
                console.log("进行权限url添加, 当前角色是：" + roleId)
                // 2、获取当前复选框的数据
                var data = table.checkStatus('munu-table').data;

                // 3、将获取到的复选框数据进行封装
                var authIdList = []
                for (var i = 0; i < data.length; i++) {
                    authIdList.push(data[i].id)
                }

                // 4.发送ajax请求更新当前角色的权限
                $.ajax({
                    type: 'POST',
                    url: $api + "authorized/update/roleMenusId",
                    dataType: 'json',
                    headers: {
                        'Authorization': layui.data('table')['Authorization']
                    },
                    contentType: "application/json;charset=utf-8",
                    data: JSON.stringify({
                        'menusId': authIdList,
                        'roleId': roleId
                    }),
                    success: function (res) {
                        identifyCode(res)
                       if(res.code == 0){
                          alert(res.message)
                           // 处理成功，返回到上层页面
                           var iframeIndex = parent.layer.getFrameIndex(window.name);
                           parent.location.reload();
                           parent.layer.close(iframeIndex);
                       }

                    }
                })
            }
        });
        //监听表格复选框选择
        table.on('checkbox(munu-table)', function (obj) {
        });
    });
</script>
</body>
</html>